<template>
  <el-dialog
    :title="title"
    width="90%"
    :visible.sync="showModal"
    @close="closeDialog">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="auto">
      <el-row
        :gutter="20"
        style="flex-wrap: wrap"
        type="flex">
        <el-col
          v-if="pageType=='view'"
          :span="6">
          <el-form-item
            label="计划编号"
            prop="planNumber">
            {{ form.planNumber }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="工艺类型"
            prop="hotOrColdRolled">
            <template v-if="pageType=='view'">
              {{ renderText(contractType,form.hotOrColdRolled) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.hotOrColdRolled"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in contractType"
                :key="index"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="合同号"
            prop="contractNo">
            <template v-if="pageType=='view'">
              {{ form.contractNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.contractNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="坯料合同号"
            prop="blankContractNo">
            <template v-if="pageType=='view'">
              {{ form.blankContractNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.blankContractNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="紧急度"
            prop="urgency">
            <template v-if="pageType=='view'">
              {{ renderText(degreeOption,form.urgency) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.urgency"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in degreeOption"
                :key="index"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="工艺标准"
            prop="processStandard">
            <template v-if="pageType=='view'">
              {{ form.processStandard }}
            </template>
            <el-input
              v-else
              v-model.trim="form.processStandard" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="下达数量"
            prop="releasedQuantity">
            <template v-if="pageType=='view'">
              {{ form.releasedQuantity }}
            </template>
            <el-input
              v-else
              v-model.trim="form.releasedQuantity" />
          </el-form-item>
        </el-col>
        <el-col
          v-if="pageType!='add'"
          :span="6">
          <el-form-item
            label="下达日期"
            prop="releaseDate">
            {{ form.releaseDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="限收数量"
            prop="restrictedQuantity">
            <template v-if="pageType=='view'">
              {{ form.restrictedQuantity }}至{{ form.restrictedQuantity2 }}吨
            </template>
            <div
              v-else
              class="limitNum">
              <div>
                <el-input
                  v-model="form.restrictedQuantity"
                  type="number" />
              </div>
              <span>至</span>
              <div>
                <el-input
                  v-model="form.restrictedQuantity2"
                  type="number" />
              </div>
              <span>吨</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="执行标准"
            prop="executiveStandard">
            <template v-if="pageType=='view'">
              {{ form.executiveStandard }}
            </template>
            <el-input
              v-else
              v-model.trim="form.executiveStandard" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="钢号"
            prop="steelNumberBlank">
            <template v-if="pageType=='view'">
              {{ form.steelNumberBlank }}
            </template>
            <el-input
              v-else
              v-model.trim="form.steelNumberBlank"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="交货状态"
            prop="deliveryStatus">
            <template v-if="pageType=='view'">
              {{ renderText(deliveryStatus,form.deliveryStatus) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.deliveryStatus"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in deliveryStatus"
                :key="index"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="品名"
            prop="productName">
            <template v-if="pageType=='view'">
              {{ form.productName }}
            </template>
            <el-input
              v-else
              v-model="form.productName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="合同规格"
            prop="contractSpecifications">
            <template v-if="pageType=='view'">
              {{ form.contractSpecifications }}
            </template>
            <el-input
              v-else
              v-model="form.contractSpecifications" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="完成日期"
            prop="completionDate">
            <template v-if="pageType=='view'">
              {{ form.completionDate }}
            </template>
            <el-date-picker
              v-else
              v-model="form.completionDate"
              style="width:100%"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="备注"
            prop="remarks">
            <template v-if="pageType=='view'">
              {{ form.remarks }}
            </template>
            <el-input
              v-else
              v-model="form.remarks"
              :rows="3"
              type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="特殊要求"
            prop="specialRequirements">
            <template v-if="pageType=='view'">
              {{ form.specialRequirements }}
            </template>
            <el-input
              v-else
              v-model="form.specialRequirements"
              :rows="3"
              type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-divider></el-divider>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="坯料名称"
            prop="blankName">
            <template v-if="pageType=='view'">
              {{ form.blankName }}
            </template>
            <el-input
              v-else
              v-model="form.blankName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="预投料日期"
            prop="expectedFeedingDate">
            <template v-if="pageType=='view'">
              {{ form.expectedFeedingDate }}
            </template>
            <el-date-picker
              v-else
              v-model="form.expectedFeedingDate"
              style="width:100%"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="最晚投料日期"
            prop="latestFeedDate">
            <template v-if="pageType=='view'">
              {{ form.latestFeedDate }}
            </template>
            <el-date-picker
              v-else
              v-model="form.latestFeedDate"
              style="width:100%"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="投料类型"
            prop="feedingType">
            <template v-if="pageType=='view'">
              {{ renderText(degreeOption,form.feedingType) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.feedingType"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="(item,index) in degreeOption"
                :key="index"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="执行标准"
            prop="executiveStandardBlank">
            <template v-if="pageType=='view'">
              {{ form.executiveStandardBlank }}
            </template>
            <el-input
              v-else
              v-model.trim="form.executiveStandardBlank" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="钢号"
            prop="steelNumber">
            <template v-if="pageType=='view'">
              {{ form.steelNumber }}
            </template>
            <el-input
              v-else
              v-model.trim="form.steelNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="投料数量"
            prop="feedQuantity">
            <template v-if="pageType=='view'">
              {{ form.feedQuantity }}
            </template>
            <el-input
              v-else
              v-model.trim="form.feedQuantity" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="限投数量"
            prop="limitedInvestmentQuantity">
            <template v-if="pageType=='view'">
              {{ form.limitedInvestmentQuantity }}
            </template>
            <el-input
              v-else
              v-model.trim="form.limitedInvestmentQuantity" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="外径1"
            prop="outerDiameter1">
            <template v-if="pageType=='view'">
              {{ form.outerDiameter1 }}
            </template>
            <el-input
              v-else
              v-model.trim="form.outerDiameter1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="外径2"
            prop="outerDiameter2">
            <template v-if="pageType=='view'">
              {{ form.outerDiameter2 ? '是' : '否' }}
            </template>
            <el-input
              v-else
              v-model.trim="form.outerDiameter2" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="壁厚"
            prop="wallThickness">
            <template v-if="pageType=='view'">
              {{ form.wallThickness }}
            </template>
            <el-input
              v-else
              v-model.trim="form.wallThickness" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="长度"
            prop="length">
            <template v-if="pageType=='view'">
              {{ form.length }}
            </template>
            <el-input
              v-else
              v-model.trim="form.length" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="备注"
            prop="remarksBlank">
            <template v-if="pageType=='view'">
              {{ form.remarksBlank }}
            </template>
            <el-input
              v-else
              v-model.trim="form.remarksBlank"
              type="textarea"
              :rows="3" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="排产信息"
            prop="schedulingInformation">
            <template v-if="pageType=='view'">
              {{ form.schedulingInformation }}
            </template>
            <el-input
              v-else
              v-model.trim="form.schedulingInformation"
              type="textarea"
              :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      v-if="pageType!='view'"
      slot="footer"
      class="dialog-footer">
      <el-button @click="showModal = false">关 闭</el-button>
      <el-button
        type="primary"
        @click="add">保 存</el-button>
      <el-button
        type="primary">保存并下达</el-button>
    </span>
  </el-dialog>
</template>
  <script>
  import { deepClone } from '@/utils/index'
  export default {
    data() {
      var validatorFn = (rule, value, callback) => {
        if (value) {
          if (rule.type == 'decimal') {
            if (!/^\d*.\d{1,2}$/.test(value)) {
              callback(new Error('请输入小数，小数点后保留两位数'))
            }
          } else if (rule.type == 'int') {
            if (!/^\d*$/.test(value)) {
              callback(new Error('请输入正整数'))
            }
          } else {
            if (!/^\d*$|^\d*.\d{1,2}$/.test(value)) {
              callback(new Error('正整数、小数点保留两位小数'))
            }
          }
        }
        callback()
      }
      return {
        contractType: [{
          name: '冷轧',
          value: '1'
        }, {
          name: '热轧',
          value: '2'
        }],
        degreeOption: [{
          name: '普通',
          value: '1'
        }, {
          name: '紧急',
          value: '2'
        }],
        deliveryStatus: [
          {
            name: '已交货',
            value: '1'
          },
          {
            name: '未交货',
            value: '2'
          }],
        pageType: null, // 页面类型 编辑 还是创建
        title: null,
        showModal: false,
        form: {
          'blankContractNo': null,
          'blankName': null,
          'completionDate': null,
          'contractHasBeenReleased': null,
          'contractNo': null,
          'contractOrderQuantity': null,
          'contractSpecifications': null,
          'contractWarehousingVolume': null,
          'deliveryStatus': null,
          'executiveStandard': null,
          'executiveStandardBlank': null,
          'expectedFeedingDate': null,
          'feedQuantity': null,
          'feedingType': null,
          'hotOrColdRolled': null,
          'isDirectRelease': null,
          'latestFeedDate': null,
          'length': null,
          'limitedInvestmentQuantity': null,
          'outerDiameter1': null,
          'outerDiameter2': null,
          'planNumber': null,
          'preparedBy': null,
          'processStandard': null,
          'productName': null,
          'releaseDate': null,
          'releaseWorkshop': null,
          'releasedQuantity': null,
          'remarks': null,
          'remarksBlank': null,
          'restrictedQuantity': null,
          'restrictedQuantity2': null,
          'schedulingInformation': null,
          'specialRequirements': null,
          'steelNumber': null,
          'steelNumberBlank': null,
          'tubeBlankReleaseQuantity': null,
          'urgency': null,
          'wallThickness': null
        },
        difficultylevelOptions: [{
          name: '测试',
          value: '1'
        }],
        rules: {
          releasedQuantity: [
            { required: false, trigger: 'change', type: 'int', validator: validatorFn }
          ],
          feedQuantity: [
            { required: false, trigger: 'change', type: 'int', validator: validatorFn }
          ],
          limitedInvestmentQuantity: [
            { required: false, trigger: 'change', type: 'int', validator: validatorFn }
          ],
          outerDiameter1: [
            { required: false, trigger: 'change', validator: validatorFn }
          ],
          outerDiameter2: [
            { required: false, trigger: 'change', validator: validatorFn }
          ],
          wallThickness: [
            { required: false, trigger: 'change', validator: validatorFn }
          ],
          length: [
            { required: false, trigger: 'change', validator: validatorFn }
          ],
          hotOrColdRolled: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          contractNo: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          blankContractNo: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          blankName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          executiveStandardBlank: [
            { required: true, message: '请输入', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      closeDialog() {
        this.showModal = false
      },
      renderText(type, code) {
        if (!(type && code)) {
          return
        }
        for (const item in type) {
          if (type[item].value == code) {
            return type[item].name
          }
        }
      },
      show(parms) {
        this.showModal = true
        this.pageType = parms.type
        this.$nextTick(() => {
          this.title = parms.title
          this.init()
          if (parms.type != 'add') {
            // 填充数据
            this.fillData(parms.data)
          }
        })
      },
      add() {
        this.$refs.form.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            this.regroupFormData()
          }
        })
      },
      // 组合数据
      regroupFormData() {
        const data = deepClone(this.form)
        this.$emit('appendData', data)
      },
      // 删除空参数
      deleteNullParams(obj) {
        for (const i in obj) {
          if (obj.hasOwnProperty(i)) {
            if (!obj[i]) {
              delete obj[i]
            }
          }
        }
      },
      fillData(data) {
        this.form = data
      },
      init() {
        this.options = []
        this.form = {
          'blankContractNo': null,
          'blankName': null,
          'completionDate': null,
          'contractHasBeenReleased': null,
          'contractNo': null,
          'contractOrderQuantity': null,
          'contractSpecifications': null,
          'contractWarehousingVolume': null,
          'deliveryStatus': null,
          'executiveStandard': null,
          'executiveStandardBlank': null,
          'expectedFeedingDate': null,
          'feedQuantity': null,
          'feedingType': null,
          'hotOrColdRolled': null,
          'isDirectRelease': null,
          'latestFeedDate': null,
          'length': null,
          'limitedInvestmentQuantity': null,
          'outerDiameter1': null,
          'outerDiameter2': null,
          'planNumber': null,
          'preparedBy': null,
          'processStandard': null,
          'productName': null,
          'releaseDate': null,
          'releaseWorkshop': null,
          'releasedQuantity': null,
          'remarks': null,
          'remarksBlank': null,
          'restrictedQuantity': null,
          'restrictedQuantity2': null,
          'schedulingInformation': null,
          'specialRequirements': null,
          'steelNumber': null,
          'steelNumberBlank': null,
          'tubeBlankReleaseQuantity': null,
          'urgency': null,
          'wallThickness': null
        }
        this.$refs.form.resetFields()
      }
    }
  }
  </script>
<style scoped lang="scss">
  .box-card2{
    // margin-top:10px;
  }
  .limitNum{
    display: flex;
    >div{
      flex-flow: 1;
    }
    >span{
      margin:0 8px
    }

  }
</style>
